<template>
  <div class="business-list-container">
    <!-- 顶部标题栏 -->
    <div class="header">
      <div class="title">商家列表</div>
    </div>

    <!-- 商家列表 -->
    <div class="business-list">
      <div v-for="business in businesses" :key="business.businessId" class="business-item" @click="goToDetail(business.businessId)">
        <div class="business-img">
          <img :src="business.businessImg" :alt="business.businessName" />
          <span v-if="business.new" class="new-tag">新店</span>
        </div>
        <div class="business-info">
          <div class="business-name">{{ business.businessName }}</div>
          <div class="business-desc">{{ business.businessExplain }}</div>
          <div class="business-address">{{ business.businessAddress }}</div>
          <div class="business-footer">
            <span class="delivery-fee">¥{{ business.deliveryPrice }} 起送</span>
            <span class="divider">|</span>
            <span class="delivery-time">30分钟</span>
            <span class="divider">|</span>
            <span class="delivery-distance">3.2km</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import request from '@/utils/request'

const route = useRoute()
const router = useRouter()
const businesses = ref([])

const goToDetail = (businessId) => {
  router.push({
    path: '/business-detail',
    query: { businessId }
  })
}

onMounted(async () => {
  const orderTypeId = route.query.orderTypeId
  try {
    const res = await request.get(`/business/listBusinessByOrderTypeId?orderTypeId=${orderTypeId}`)
    if (res.data.code === 200) {
      businesses.value = res.data.data.map(business => ({
        ...business,
        businessImg: `data:image/png;base64,${business.businessImg.split('base64,')[1]}`
      }))
    }
  } catch (error) {
    console.error('获取商家列表失败:', error)
  }
})
</script>

<style scoped>
.business-list-container {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 50px;
}

.header {
  position: sticky;
  top: 0;
  background: #0097ff;
  color: white;
  padding: 12px 16px;
  text-align: center;
  z-index: 100;
}

.title {
  font-size: 16px;
  font-weight: bold;
}

.business-list {
  padding: 8px;
}

.business-item {
  background: white;
  border-radius: 8px;
  margin-bottom: 10px;
  display: flex;
  padding: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.business-item:active {
  background: #f5f5f5;
}

.business-img {
  position: relative;
  margin-right: 12px;
}

.business-img img {
  width: 64px;
  height: 64px;
  border-radius: 4px;
}

.new-tag {
  position: absolute;
  top: -6px;
  left: -6px;
  background: #00d762;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}

.business-info {
  flex: 1;
}

.business-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.business-desc {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.business-address {
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}

.business-footer {
  font-size: 12px;
  color: #666;
}

.delivery-fee, .delivery-time, .delivery-distance {
  color: #666;
}

.divider {
  margin: 0 6px;
  color: #ddd;
}
</style> 